<script setup lang="ts">
import './node-style.scss'
import {inject, ref} from "vue";
import {Node} from "@antv/x6";
import {WebDiskDatabaseApi} from "@/api/ai/webdiskdatabase";
import {ModelApi, ModelVO} from "@/api/ai/model/model";
import {AiModelTypeEnum} from "@/views/ai/utils/constants";

const dbs=ref<any[]>()
const formData = reactive<any>({
  dbId:undefined,
  threshold:undefined,
  topK:undefined,
})
const init = async () => {
  dbs.value=await WebDiskDatabaseApi.simpleList({})
  models.value = await ModelApi.getModelSimpleList(AiModelTypeEnum.RERANK)
}
const id=ref<string>()
const getNode=inject<()=>Node>('getNode')
if(getNode){
  const node=getNode()
  id.value=node.id
  node.setData(formData)
}
const models = ref([] as ModelVO[])
onBeforeMount(()=>{
  if(getNode){
    const node=getNode()
    const d=node.getData()
    if (d){
      Object.assign(formData,d)
    }else {
      node.setData(formData)
    }
  }
})
onMounted(() => {
  init()
})
watch(formData,()=>{
  if(getNode){
    const node=getNode()
    node.setData(formData)
  }
},{deep:true,immediate:false})
</script>

<template>
<div class="node">
  <div class="node-title line5">
    <div class="flow-dot" magnet="true" :class="'flow-exec'" x-type="input-exec" :x-id="'input-exec_'+id"></div>
    <div>查询Qdrant数据库</div>
    <div class="flow-dot flow-right flow-exec" magnet="true" x-type="output-exec" :x-id="'output-exec_'+id"></div>
  </div>
  <div>
    <div class="line5">
      <div class="flow-dot flow-string" magnet="true" x-type="input-text" :x-id="'input-text_'+id"></div>
      <div>字符串</div>
    </div>
    <div class="line5">
      <div class="flow-right">文档集合</div>
      <div class="flow-dot flow-array-document" magnet="true" x-type="output-array-document" :x-id="'output-array-document_'+id" x-key="document"></div>
    </div>
  </div>
  <el-form
    :model="formData"
    label-position="top"
    @mousedown.stop
    @focus.stop
    style="cursor: default"
  >
    <el-form-item label="数据库">
      <el-select v-model="formData.dbId" clearable placeholder="请选择数据库">
        <el-option v-for="db in dbs" :key="db.id" :label="db.name" :value="db.id" />
      </el-select>
    </el-form-item>
    <el-form-item label="阈值(最小相似度)">
      <el-input-number style="width: 100%" :min="0.2" :max="1.0" :step="0.1" v-model="formData.threshold"/>
    </el-form-item>
    <el-form-item label="topK">
      <el-input-number style="width: 100%" :min="1" :max="100" :step="1" v-model="formData.topK"/>
      <el-alert title="按照相似度排序，排序并获取前的K个" />
    </el-form-item>
    <el-form-item label="启用重排">
      <el-switch v-model="formData.rerank"/>
    </el-form-item>
    <el-form-item label="重排模型">
      <el-select v-model="formData.modelId" placeholder="请选择模型" clearable>
        <el-option
          v-for="model in models"
          :key="model.id"
          :label="model.name"
          :value="model.id"
        />
      </el-select>
    </el-form-item>
    <el-form-item label="topN">
      <el-input-number style="width: 100%" :min="1" :max="100" :step="1" v-model="formData.topN"/>
      <el-alert title="重排后，按照相似度排序，排序并获取前的K个" />
    </el-form-item>
  </el-form>
</div>
</template>

<style scoped lang="scss">

</style>
